import React, {Component} from 'react';
import './index.less';
import {base, getMultiLang} from 'nc-lightapp-front';
import addSearch from './functions/addSearch';
import searchPsn from './functions/searchPsn';
import addConfirm from './functions/addConfirm';
import addConfirmAsk from './functions/addConfirmAsk';
import {debounce, formatDate} from 'src/hrpub/common/utils/utils';
import OrgRefer from '../../../refer/cmref/AdminOrgDefaultTreeRef';
import DeptRefer from '../../../refer/cmref/HRDeptTreeRef';
import PsnRefer from 'src/hrhi/refer/hiref/PsnjobRefTreeGridRef';

const {NCModal, NCButton, NCSelect, NCInputNumber, NCDatePicker, NCRadio} = base;
const {Header: NCModalHeader, Body: NCModalBody, Footer: NCModalFooter} = NCModal;
const {NCOption} = NCSelect;

class OpinionAsk extends Component {
    constructor(props) {
        super(props);
        this.state = {
            json: {},
            endDate: formatDate(new Date()),
            orgVal: {},
            deptVal: [],
            psnVal: [],
            remmonthtext: '',
            remenddate: '',
            termtype: 'CM01',
            selectedunit: '2',
            selradiobtn: 'remmonth',
            unitDisable: false,
            termDisable: false,
            toDisable: true,
            renewalTypeDisable: false,
            showSearch: true,
            visible: false,
            tableHeight: ''
        };
        this.beSure = this.beSure.bind(this);
        this.beSureAsk = this.beSureAsk.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.renewalTypeChange = this.renewalTypeChange.bind(this);
        this.addSearch = this.addSearch.bind(this);
        this.onTypeChange = this.onTypeChange.bind(this);
        this.open = this.open.bind(this);
        this.setTableHeight = this.setTableHeight.bind(this);
    }

    componentDidMount() {
        let callback = (json, status, inlt) => {
            if (status) {
                this.setState({json})
            }
        };
        getMultiLang({domainName: 'hrcm', moduleId: 'cm6011', callback});
    }

    addSearch() {
        addSearch.call(this);
    }

    beSure() {
        addConfirm.call(this);
    }

    beSureAsk() {
        addConfirmAsk.call(this);
    }

    closeModal() {
        this.setState({
            visible: false
        });
        window.removeEventListener("resize", debounce(this.setTableHeight));
    }

    open(data) {
        let tableHeight = 0;
        if (data != null) {
            searchPsn.call(this, data);
            tableHeight = document.body.clientHeight - 295;
        } else {
            tableHeight = document.body.clientHeight - 365;
        }
        this.setState({
            endDate: formatDate(new Date()),
            orgVal: {},
            deptVal: [],
            psnVal: [],
            remmonthtext: '',
            remenddate: '',
            termtype: 'CM01',
            selectedunit: '2',
            selradiobtn: 'remmonth',
            unitDisable: false,
            termDisable: false,
            toDisable: true,
            renewalTypeDisable: false,
            showSearch: !data,
            visible: true,
            tableHeight
        });
        this.setTableHeight();
        window.addEventListener("resize", debounce(this.setTableHeight));
    }

    setTableHeight() {
        let tableHeight = 0;
        if (!this.state.showSearch) {
            tableHeight = document.body.clientHeight - 328;
        } else {
            tableHeight = document.body.clientHeight - 398;
        }
        this.setState({
            tableHeight
        })
    }

    onTypeChange(value) {
        const flag = !(value === 'CM01'),
            {renewalType} = this.state;
        this.setState({
            termtype: value,
            unitDisable: flag,
            termDisable: flag || (!flag && renewalType === 'toDate'),
            toDisable: flag || (!flag && renewalType === 'remmonth'),
            renewalTypeDisable: flag,
            remmonthtext: '',
            remenddate: ''
        });
    }

    renewalTypeChange(value) {
        if (value === 'remmonth') {
            this.setState({
                selradiobtn: value,
                toDisable: true,
                remenddate: '',
                termDisable: false
            });
        } else {
            this.setState({
                selradiobtn: value,
                toDisable: false,
                remmonthtext: '',
                termDisable: true
            });
        }
    }

    render() {
        const {table, orgVal: propsOrgVal} = this.props;
        const {
            selradiobtn,
            endDate,
            orgVal,
            deptVal,
            psnVal,
            termtype,
            selectedunit,
            remmonthtext,
            remenddate,
            unitDisable,
            termDisable,
            toDisable,
            renewalTypeDisable,
            visible,
            showSearch,
            json,
            tableHeight
        } = this.state;
        const types = [
                {
                    value: 'CM01',
                    title: json['cm6011-000012'] /* 国际化处理： 固定期限*/
                },
                {
                    value: 'CM02',
                    title: json['cm6011-000013'] /* 国际化处理： 无固定期限*/
                },
                {
                    value: 'CM03',
                    title: json['cm6011-000014'] /* 国际化处理： 以完成一定工作任务为期限*/
                }
            ],
            units = [
                {
                    value: '1',
                    title: json['cm6011-000015'] /* 国际化处理： 年*/
                },
                {
                    value: '2',
                    title: json['cm6011-000016'] /* 国际化处理： 月*/
                },
                {
                    value: '3',
                    title: json['cm6011-000017'] /* 国际化处理： 天*/
                }
            ],
            renewalTypes = [
                {
                    value: 'remmonth',
                    title: json['cm6011-000026'] /* 国际化处理： 期限*/
                },
                {
                    value: 'toDate',
                    title: json['cm6011-000027'] /* 国际化处理： 同意续签至*/
                }
            ];

        const tableDom = visible ? <div className="add-new-table" style={!showSearch ? {marginTop: 10} : {}}>
            {table.createSimpleTable('contopinionadd', {
                cancelCustomRightMenu: true,
                showCheck: true,
                height: tableHeight
            })}
        </div> : null;

        const footDom = visible ? <div>
            <div className="footer-title">{json['cm6011-000023']}</div>
            {/* 国际化处理： 劳动合同到期后用人单位的续签意见*/}
            <div className="add-new-footer">
                <div className="footer-type">
                    <span>{json['cm6011-000024']}</span>
                    {/* 国际化处理： 类型*/}
                    <NCSelect value={termtype} onChange={this.onTypeChange}>
                        {types.map((item) => {
                            return <NCOption value={item.value}>{item.title}</NCOption>;
                        })}
                    </NCSelect>
                </div>
                <div className="footer-units">
                    <span>{json['cm6011-000025']}</span>
                    {/* 国际化处理： 单位*/}
                    <NCSelect
                        value={selectedunit}
                        onChange={(value) => this.setState({selectedunit: value})}
                        disabled={unitDisable}
                    >
                        {units.map((item) => {
                            return <NCOption value={item.value}>{item.title}</NCOption>;
                        })}
                    </NCSelect>
                </div>
                <div className="footer-radio-group">
                    <span>{json['cm6011-000154']}</span>
                    <NCSelect
                        value={selradiobtn}
                        onChange={(value) => this.renewalTypeChange(value)}
                        disabled={renewalTypeDisable}
                    >
                        {renewalTypes.map((item) => {
                            return <NCOption value={item.value}>{item.title}</NCOption>;
                        })}
                    </NCSelect>
                    <div className='footer-group-term'>
                        {selradiobtn === 'remmonth' ? <NCInputNumber
                            iconStyle="one"
                            scale={0}
                            disabled={termDisable}
                            value={remmonthtext}
                            onChange={(value) =>
                                this.setState({
                                    remmonthtext: value + ""
                                })}
                        /> : <NCDatePicker
                            disabled={toDisable}
                            value={remenddate}
                            onChange={(value) =>
                                this.setState({
                                    remenddate: value
                                })}
                        />}
                    </div>
                </div>
            </div>
        </div> : null;

        return (
            <NCModal
                show={visible}
                size="xlg"
                onHide={this.closeModal}
                backdrop={'static'}
                className='opinion-ask'
            >
                <div style={{display: visible ? '' : 'none'}}>
                    <NCModalHeader closeButton={true}>
                        {json['cm6011-000018']}
                        {/* 国际化处理： 续签征询*/}
                    </NCModalHeader>
                    <NCModalBody>
                        {showSearch ? <div className="add-new-header">
                            <div>
                                <span>{json['cm6011-000019']}</span>
                                {/* 国际化处理： 人员所属组织*/}
                                <OrgRefer
                                    value={orgVal}
                                    queryCondition={{
                                        pk_org: propsOrgVal.refpk,
                                        TreeRefActionExt: 'nccloud.web.hrcm.contopinion.sqlbuilder.OrgSelSqlBuilder'
                                    }}
                                    onChange={(value) =>
                                        this.setState({
                                            orgVal: value
                                        })}
                                />
                            </div>
                            <div>
                                <span>{json['cm6011-000020']}</span>
                                {/* 国际化处理： 部门*/}
                                <DeptRefer
                                    value={deptVal}
                                    queryCondition={{
                                        pk_org: orgVal.refpk || propsOrgVal.refpk,
                                        TreeRefActionExt: 'nccloud.web.hrcm.contopinion.sqlbuilder.DeptSelSqlBuilder'
                                    }}
                                    onChange={(value) =>
                                        this.setState({
                                            deptVal: value
                                        })}
                                />
                            </div>
                            <div className="no-padding-right">
                                <span>{json['cm6011-000055']}</span>
                                {/* 国际化处理： 人员*/}
                                <PsnRefer
                                    value={psnVal}
                                    queryCondition={{
                                        pk_org: orgVal.refpk || propsOrgVal.refpk,
                                        pk_dept: deptVal.refpk,
                                        busiregionEnum: 'psnpact',
                                        GridRefActionExt: 'nccloud.web.hrcm.contopinion.sqlbuilder.PsnSelSqlBuilder'
                                    }}
                                    onChange={(value) =>
                                        this.setState({
                                            psnVal: value
                                        })}
                                    isMultiSelectedEnabled={true}
                                />
                            </div>
                            <div>
                                <span><span className="u-mast">*</span>{json['cm6011-000021']}</span>
                                {/* 国际化处理： 合同结束日期早于*/}
                                <NCDatePicker
                                    className={this.state.endDate ? '' : 'verify-error'}
                                    onChange={(value) =>
                                        this.setState({
                                            endDate: value
                                        })}
                                    value={endDate}
                                />
                            </div>
                            <div>
                                <NCButton onClick={this.addSearch}>
                                    {json['cm6011-000153']}
                                    {/* 国际化处理： 查询人员*/}
                                </NCButton>
                            </div>
                        </div> : null}
                        {showSearch ? [tableDom, footDom] : [footDom, tableDom]}
                    </NCModalBody>
                    <NCModalFooter>
                        <NCButton colors="primary" onClick={this.beSure}>
                            {json['cm6011-000028']}
                            {/* 国际化处理： 确定*/}
                        </NCButton>
                        {/*<NCButton colors="border" onClick={this.beSureAsk}>
                        {json['cm6011-000029']}
                         国际化处理： 确定并征询
                    </NCButton>*/}
                        <NCButton shape="border" onClick={this.closeModal}>
                            {json['cm6011-000054']}
                            {/* 国际化处理： 取消*/}
                        </NCButton>
                    </NCModalFooter>
                </div>
            </NCModal>
        );
    }
}

export default OpinionAsk;